<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    .el-header, .el-footer {
        float: right;
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;

    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        /* line-height: 160px;+  */
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .login-register {
        float: right;
    }

    .tag {
        float: left;
        padding-left: 8%;
        padding-right: 1.5%;
    }

    /*下拉菜单*/
    .el-dropdown-link {

        cursor: pointer;
        color: #409EFF;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>
<body>
<div id="app">
    <el-container>
        <el-header>
            <span class="login-register" v-if="consumer==null"><a href="http://localhost:63342/blog/blog-client-controller/web/WEB-INF/login.html?_ijt=hlsi8vmj0la554u55stt1c0h90">登录</a> | <a
                    href="http://localhost:63342/blog/blog-client-controller/web/WEB-INF/register.html?_ijt=oldsanff87m94svlipr3hhf1kd">注册</a></span>

            <el-dropdown v-if="consumer!=null" @command="esc" style="float: right">
        <span class="el-dropdown-link">
            <span hidden>{{consumer.consumerUuid}}</span>
            {{consumer.consumerName}}
            <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a" @click="esc">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

        </el-header>
        <el-container>

            <el-aside width="300px">
                <div style="padding: 5%"></div>
                <div>
                    <div v-for="t in listTag" @click="addTagReadCount(t.tagUuid)">
                        <div><span @click="byTagUuidGetNoneHighlightBlogInfo(t.tagUuid)">{{t.tagName}} ({{t.readCount}})</span></div>
                        <div style="padding: 5%"></div>
                    </div>
                </div>
            </el-aside>

            <el-main>
                <div>
                    <div  style="padding-bottom:1%"><span style="font-size: 40px;">公告</span></div>
                    <div v-for="rhb in listRootHighlightBlog">
                        <div @click="byBlogUuidGetNoneHighlightBlogInfo(rhb.blogUuid,rhb.highlight)">
                            <a v-bind:href="blogHome" id="blog-home" hidden></a>
                            <span hidden>{{rhb.blogUuid}}</span>
                            <span hidden>{{rhb.tagUuid}}</span>
                            <span>[{{rhb.tagName}}]</span>
                            <span>{{rhb.blogTitle}}</span>
                            <span hidden>{{rhb.blogAuthor}}</span>
                            <span hidden>{{rhb.highlight}}</span>
                            <span>{{rhb.consumerName}}</span>
                            <span>{{rhb.blogPostDate}}</span>
                        </div>
                        <div style="padding: 1%;"></div>
                    </div>

                </div>
                <div style="padding: 2%;"></div>

                <div>
                    <div>
                        <div v-for="t in listTag" @click="addTagReadCount(t.tagUuid)">
                            <span class="tag" @click="byTagUuidGetNoneHighlightBlogInfo(t.tagUuid)">{{t.tagName}}</span>
                        </div>
                        <div style="padding: 5%;"></div>
                    </div>
                    <div v-for="nhb in listNoneHighlightBlog">
                        <div @click="byBlogUuidGetNoneHighlightBlogInfo(nhb.blogUuid,nhb.highlight)">
                            <span hidden>{{nhb.blogUuid}}</span>
                            <span hidden>{{nhb.tagUuid}}</span>
                            <span>[{{nhb.tagName}}]</span>
                            <span>{{nhb.blogTitle}}</span>
                            <span hidden>{{nhb.blogAuthor}}</span>
                            <span hidden>{{nhb.highlight}}</span>
                            <span>{{nhb.consumerName}}</span>
                            <span>{{nhb.blogPostDate}}</span>
                        </div>
                        <div style="padding: 2%;"></div>
                    </div>
                </div>

                <div>
                    <div class="block">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="paginationVO.pageNum"
                                :page-size="paginationVO.pageSize"
                                layout="prev, pager, next, jumper"
                                :total="1000">
                        </el-pagination>
                    </div>
                </div>
            </el-main>

            <el-aside width="300px">
                <div style="padding: 5%"></div>
                <div>
                    <div v-for="t in listTag" @click="addTagReadCount(t.tagUuid)">
                        <div><span @click="byTagUuidGetNoneHighlightBlogInfo(t.tagUuid)">{{t.tagName}} ({{t.readCount}})</span></div>
                        <div style="padding: 5%"></div>
                    </div>
                </div>
            </el-aside>

        </el-container>
    </el-container>

</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            blogHome:'http://localhost:63342/blog/blog-client-controller/web/WEB-INF/blog-home.html?_ijt=fg7ger421nsl0acs2jubtet37k',
            consumer: {},
            listTag: [],
            listNoneHighlightBlog: [],
            listRootHighlightBlog: [],
            addTagReadCountVO: {
                tagUuid: ''
            },
            paginationVO: {
                pageNum: 1,
                pageSize: 10
            },
            paginationVO2: {
                pageNum: 1,
                pageSize: 3
            },
            byTagUuidGetNoneHighlightBlogInfoVO: {
                tagUuid: ''
            },
        },
        mounted() {
            this.consumer = JSON.parse(localStorage.getItem("consumer"));
            this.getAllTag();
            this.getNoneHighlightBlog();
            this.getAllRootHighlightBlogInfo();
        },
        methods: {
            esc() {
                this.consumer = null;
                localStorage.removeItem("consumer");
                this.getAllTag();
                this.getNoneHighlightBlog();
                this.getAllRootHighlightBlogInfo();
            },
            getNoneHighlightBlog() {
                axios.get('http://127.0.0.1:8181/blog/get-none-highlight-blog', {
                    params: {
                        paginationVO: this.paginationVO
                    }
                }).then(e => {
                    vm.listNoneHighlightBlog = e.data.responseObject;
                })
            },
            byTagUuidGetNoneHighlightBlogInfo(tagUuid){
                this.byTagUuidGetNoneHighlightBlogInfoVO.tagUuid = tagUuid;
                axios.post('http://127.0.0.1:8181/blog/by-tagUuid-get-none-highlight-blog-info', this.byTagUuidGetNoneHighlightBlogInfoVO).then(e => {
                    vm.listNoneHighlightBlog = e.data.responseObject;
                })
            },
            getAllRootHighlightBlogInfo() {
                axios.get('http://127.0.0.1:8181/blog/get-all-root-highlight-blogInfo', {
                    params: {
                        paginationVO: this.paginationVO2
                    }
                }).then(e => {
                    console.log(e.data.responseObject);
                    vm.listRootHighlightBlog = e.data.responseObject;
                })
            },
            byBlogUuidGetNoneHighlightBlogInfo(blogUuid,highlight){
                localStorage.setItem("blogUuid", JSON.stringify(blogUuid));
                localStorage.setItem("highlight", JSON.stringify(highlight));
                document.getElementById('blog-home').click();
            },
            getAllTag() {
                axios.get('http://127.0.0.1:8181/tag/get-all-tag').then(e => {
                    vm.listTag = e.data.responseObject;
                })
            },
            addTagReadCount(tagUuid) {
                vm.addTagReadCountVO.tagUuid = tagUuid;
                axios.post('http://127.0.0.1:8181/tag/add-tag-readCount', vm.addTagReadCountVO).then(() => {
                    vm.getAllTag();
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.paginationVO.pageNum = val;
                this.getAllTag();
                this.getNoneHighlightBlog();
                console.log(`当前页: ${val}`);
            }
        }
    })
</script>
</html>